<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
    <base href="<%=basePath%>">
    <title></title>
    <meta http-equiv="cache-control" content="no-cache">

    <script src="/js/jquery-1.8.0.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/maintable.css" ></link>
    <link rel="stylesheet" type="text/css" href="/css/message.css">

    <script>
        function deleteChecked(){
            if($("input[name=SecondMenuIds]:checked").length+$("input[name=FirstmenuIds]:checked").length==0){
                alert("请勾选一个分类！");
            }
            else{
                if(confirm("确认要删除吗？")){
                    // var checkedIds = $("input[name=SecondMenuIds]:checked").map(function() {
                    //     return this.value;
                    // }).get();
                    // alert(checkedIds)
                    // // 获取一个包含所有被选中 input 元素的 value 值的数组，
                    // // 应该使用 .map() 方法，而不是 .each() 方法。
                    // // 如果只是需要遍历元素并执行某些操作，而不需要关心返回值，那么 .each() 方法是一个更合适的选择。
                    // $.ajax({
                    //    url:"GoodsServlet",
                    //    type:"post",
                    //    data:{checkedIds:checkedIds,flag:"updateGoodsMenu"},
                    //    contentType:"json",
                    //    success:function (date){
                    //        alert(date);
                    //    }
                    // });
                    // 失败的ajax呜呜呜 ┭┮﹏┭┮ , 顺从的使用表单了，已老实
                    document.form1.submit();
                }
            }
        }

        $(function (){
            //以下编写菜单联动功能（测试版）
            // 1.先完成勾选一个一级菜单多选框 ——> 勾选对应的二级勾选框（单一逻辑）
            $(".firstCheck").click(function (){
                $(this).closest("tr").find(".doubleCheck").prop("checked", this.checked);
            });
            // 2.再完成勾选对应的二级勾选框 ——> 选一个一级菜单多选框（多逻辑）
            $(".doubleCheck").click(function() {
                // 找到当前二级复选框所在行的一级复选框
                var firstCheck = $(this).closest('tr').find(".firstCheck");
                // 所在行内是否还有其他的二级复选框被选中
                var anyChecked = $(this).closest('tr').find(".doubleCheck:checked");
                // 如果没有二级复选框被选中，则取消对应的一级复选框的选中
                if (!anyChecked.length>0) {
                    firstCheck.prop("checked", false);
                }
                // 如果有一个二级复选框被勾选，那么勾选对应的一级复选框
                else if (!firstCheck.prop("checked")) {
                    firstCheck.prop("checked", true);
                }
            });
        });

    </script>


</head>

<body>
    <div class ="div_title">
        <div class="div_titlename"> <img src="/images/san_jiao.gif" ><span>商品分类维护</span></div>
        <div class="div_titleoper">
            <a href="/goods/smallcate_add.jsp"> <img src="/images/add.gif"/>添加 </a> <a href="javascript:deleteChecked()"><img src="/images/del.gif" class="delete"/>删除</a> </div>
    </div>
    <form action="GoodsServlet" method="post" name="form1">
        <input type="hidden" name="flag" value="updateGoodsMenu" >

        <table border="1" class="main_table">
            <tr>
                <th>一级分类</th>
                <th>二级分类</th>
            </tr>

            <c:forEach var="m" items="${cateList }">
                <tr>
                    <td>
                        <input type="checkbox" name="FirstmenuIds" value="${m.id }" id="${m.id}" class="firstCheck"> ${m.cateName }
                    </td>
                    <td>
                        <c:forEach var="m_sub" items="${m.subCateList }">
                            <input type="checkbox" name="SecondMenuIds" value="${m_sub.id }" id="${m_sub.id }" class="doubleCheck"> ${m_sub.cateName }<br>
                        </c:forEach>
                    </td>
                </tr>
            </c:forEach>
        </table>
        <label id="result_msg" class="result_msg" style="color: #74d2d9">${msg}</label>
    </form>
</body>
</html>